import React from 'react'
import { dictionary } from '../../../utils/dictionary';
import { Form, Input, Select } from 'antd'
import { help } from '../../../utils/help';
import { axhttp } from '../../../utils/axhttp';
const FormItem = Form.Item;
const Option = Select.Option;

const url = {
    readx: '/api/user/readx',
}
class FormComponent extends React.Component {
    /** 状态数据 */
    state = {
        /** 管理员信息 */
        users: [],
    }

    componentDidMount() {
        axhttp.getXhr(url.readx).then(res => {
            this.setState({ users: help.transToStandardData(res.data.list, 'id', 'username') });
        });
    }

    /** 选择时，将名称保存到对应的表单字段中 */
    handleChangeUser = (administatorId) => {
        const { form } = this.props;
        const { users } = this.state;

        form.setFieldsValue({
            administatorName: users.find(i => i.value == administatorId).text,
        });
    }

    render() {
        const { form, values = {} } = this.props;
        const { users } = this.state;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 }
        };

        return (
            <Form layout="horizontal">
                <FormItem label="城市名称" {...formItemLayout}>
                    {
                        getFieldDecorator('cityName', {
                            /** 初始值 */
                            initialValue: values.cityName,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '城市名称不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入城市名称" />
                        )
                    }
                </FormItem>
                <FormItem label="用车模式" {...formItemLayout}>
                    {
                        getFieldDecorator('carMode', {
                            /** 初始值 */
                            initialValue: values.carMode,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '用车模式不能为空'
                                }
                            ]
                        })(
                            <Select placeholder="请选择用车模式">
                                {dictionary.carMode.map(m => (<Option value={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <FormItem label="营运模式" {...formItemLayout}>
                    {
                        getFieldDecorator('opMode', {
                            /** 初始值 */
                            initialValue: values.opMode,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '营运模式不能为空'
                                }
                            ]
                        })(
                            <Select placeholder="请选择营运模式">
                                {dictionary.opMode.map(m => (<Option value={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <FormItem label="加盟商" {...formItemLayout}>
                    {
                        getFieldDecorator('franchiseeName', {
                            /** 初始值 */
                            initialValue: values.franchiseeName,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '加盟商不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入加盟商" />
                        )
                    }
                </FormItem>
                <FormItem label="管理员" {...formItemLayout}>
                    {
                        getFieldDecorator('administatorId', {
                            /** 初始值 */
                            initialValue: values.administatorId,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '管理员不能为空'
                                }
                            ]
                        })(
                            <Select type="text" placeholder="请选择角色" onChange={this.handleChangeUser}>
                                {users.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <div style={{ display: 'none' }}>
                    <FormItem label="管理员姓名" {...formItemLayout}>
                        {
                            getFieldDecorator('administatorName', {
                                /** 初始值 */
                                initialValue: values.administatorName,
                            })(
                                <Input type="text" hidden={true} />
                            )
                        }
                    </FormItem>
                </div>
            </Form>
        );
    }
}

export default Form.create({})(FormComponent);